<template>
  <div class="parent">
    <h1>我是父组件</h1>
    <div>父亲的汽车：{{ car }}</div>
    <div>儿子的玩具：{{ toy }}</div>
    <Child @send-toy="saveToy"></Child>
  </div>
</template>

<script setup lang="ts">
import Child from '@/component/Child.vue';
import { ref, onUnmounted } from 'vue';
import emitter from '@/utils/emitter.ts';

const car = ref("宝马")
const toy = ref('')

function saveToy(value: string) {
  toy.value = value
}
emitter.on('send-toy', saveToy)
onUnmounted(() => {
  emitter.off('send-toy')
})
</script>

<style scoped>
.parent {
  border: 1px solid black;
  box-shadow: 0 0 10px;
  background-color: bisque;
  border-radius: 20px;
  padding: 20px;
}
</style>